/**
* 功能描述: 固定得行和列demo
* @author 崔孝楠
* @date 2022/10/8 20:36
* @version 1.0
*/
<template>
  <span>固定行列</span>
  <div class="yw-table yw-table-fixed-left yw-table-fixed-right yw-table-fixed-header yw-table-fixed-column yw-table-scroll-horizontal">
    <div class="yw-table-container">
      <div class="yw-table-header">
        <table>
          <colgroup>
            <col style="width: 100px;">
            <col style="width: 100px;">
            <col style="width: 150px;">
            <col style="width: 150px;">
            <col style="width: 150px;">
            <col style="width: 150px;">
            <col style="width: 150px;">
            <col style="width: 150px;">
            <col style="width: 150px;">
            <col style="width: 150px;">
            <col style="width: 100px;">
          </colgroup>
          <thead class="yw-table-thead">
          <tr>
            <th class="yw-table-cell yw-table-cell-fix-left">
              Full Name
            </th>
            <th class="yw-table-cell yw-table-cell-fix-left yw-table-cell-fix-left-last" colstart="1" colend="1">
              Age
            </th>
            <th class="yw-table-cell" colstart="2" colend="2">
              Column 1
            </th>
            <th class="yw-table-cell" colstart="3" colend="3">
              Column 2
            </th>
            <th class="yw-table-cell" colstart="4" colend="4">
              Column 3
            </th>
            <th class="yw-table-cell" colstart="5" colend="5">
              Column 4
            </th>
            <th class="yw-table-cell" colstart="6" colend="6">
              Column 5
            </th>
            <th class="yw-table-cell" colstart="7" colend="7">
              Column 6
            </th>
            <th class="yw-table-cell" colstart="8" colend="8">
              Column 7
            </th>
            <th class="yw-table-cell" colstart="9" colend="9">
              Column 8
            </th>
            <th class="yw-table-cell yw-table-cell-fix-right yw-table-cell-fix-right-first" colstart="10" colend="10">
              Action
            </th>
          </tr>
          </thead>

        </table>
      </div>
      <div class="yw-table-body">
        <table style="min-width: 100%; width: 1500px;">
          <colgroup>
            <col style="width: 100px;">
            <col style="width: 100px;">
            <col style="width: 150px;">
            <col style="width: 150px;">
            <col style="width: 150px;">
            <col style="width: 150px;">
            <col style="width: 150px;">
            <col style="width: 150px;">
            <col style="width: 150px;">
            <col>
            <col style="width: 100px;">
          </colgroup>
          <tbody class="yw-table-tbody">
          <tr aria-hidden="true" class="yw-table-measure-row">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr data-row-key="0" class="yw-table-row">
            <td class="yw-table-cell yw-table-cell-fix-left yw-table-cell-fix-left-first">
              Edrward 0
            </td>
            <td class="yw-table-cell yw-table-cell-fix-left yw-table-cell-fix-left-last">
              32
            </td>
            <td class="yw-table-cell">
              London Park no. 0
            </td>
            <td class="yw-table-cell">
              London Park no. 0
            </td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell yw-table-cell-fix-right yw-table-cell-fix-right-first">
              <a>action</a>
            </td>
          </tr>
          <tr data-row-key="0" class="yw-table-row">
            <td class="yw-table-cell yw-table-cell-fix-left yw-table-cell-fix-left-first">
              Edrward 0
            </td>
            <td class="yw-table-cell yw-table-cell-fix-left yw-table-cell-fix-left-last">
              32
            </td>
            <td class="yw-table-cell">
              London Park no. 0
            </td>
            <td class="yw-table-cell">
              London Park no. 0
            </td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell yw-table-cell-fix-right yw-table-cell-fix-right-first">
              <a>action</a>
            </td>
          </tr>
          <tr data-row-key="0" class="yw-table-row">
            <td class="yw-table-cell yw-table-cell-fix-left yw-table-cell-fix-left-first">
              Edrward 0
            </td>
            <td class="yw-table-cell yw-table-cell-fix-left yw-table-cell-fix-left-last">
              32
            </td>
            <td class="yw-table-cell">
              London Park no. 0
            </td>
            <td class="yw-table-cell">
              London Park no. 0
            </td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell yw-table-cell-fix-right yw-table-cell-fix-right-first">
              <a>action</a>
            </td>
          </tr>
          <tr data-row-key="0" class="yw-table-row">
            <td class="yw-table-cell yw-table-cell-fix-left yw-table-cell-fix-left-first">
              Edrward 0
            </td>
            <td class="yw-table-cell yw-table-cell-fix-left yw-table-cell-fix-left-last">
              32
            </td>
            <td class="yw-table-cell">
              London Park no. 0
            </td>
            <td class="yw-table-cell">
              London Park no. 0
            </td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell yw-table-cell-fix-right yw-table-cell-fix-right-first">
              <a>action</a>
            </td>
          </tr>
          <tr data-row-key="0" class="yw-table-row">
            <td class="yw-table-cell yw-table-cell-fix-left yw-table-cell-fix-left-first">
              Edrward 0
            </td>
            <td class="yw-table-cell yw-table-cell-fix-left yw-table-cell-fix-left-last">
              32
            </td>
            <td class="yw-table-cell">
              London Park no. 0
            </td>
            <td class="yw-table-cell">
              London Park no. 0
            </td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell yw-table-cell-fix-right yw-table-cell-fix-right-first">
              <a>action</a>
            </td>
          </tr>
          <tr data-row-key="0" class="yw-table-row">
            <td class="yw-table-cell yw-table-cell-fix-left yw-table-cell-fix-left-first">
              Edrward 0
            </td>
            <td class="yw-table-cell yw-table-cell-fix-left yw-table-cell-fix-left-last">
              32
            </td>
            <td class="yw-table-cell">
              London Park no. 0
            </td>
            <td class="yw-table-cell">
              London Park no. 0
            </td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell">London Park no. 0</td>
            <td class="yw-table-cell yw-table-cell-fix-right yw-table-cell-fix-right-first">
              <a>action</a>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "tableWithFixed"
}
</script>

<style scoped>

</style>
